<template>
    <div :class="`sell_card ${data.class.tpl} ${data.class.radius} ${data.class.goods_radius}`"
         :style="{'margin-bottom': data.style.margin_bottom+'px',
         'background-color': data.style.background,
         'margin-left':data.style.margin_x+'px', 'margin-right': data.style.margin_x+'px'}">
        <div>
            <div class="sell_card_hd">
                <div class="sell_card_hd_li"
                     :class="{'active': i==activeIndex}"
                     v-for="(card,i) in data.list" :key="i"
                     @click.stop="cardChange(i)"
                >
                    <div class="sell_card_title">{{card.title}}</div>
                    <div class="sell_card_sub_title">{{card.sub_title}}</div>
                </div>
            </div>


            <div :class="`goods ${data.class.col_num}`"
                 :style="{}"
            >
                <div class="goods_ul">
                    <div class="goods_li" v-for="li in data.list[activeIndex].list.slice(0, data.config.num)">
                        <div class="goods_li_img">
                            <img class="img" :src="li.image"/>
                        </div>
                        <div class="goods_li_con">
                            <div class="goods_li_title">{{li.title}}</div>
                            <div class="d_flex flex_ai_c mb5">
                                <div class="line_price" v-if="li.line_price>li.price">￥{{li.line_price}}</div>
                                <div class="price">￥{{li.price}}</div>
                            </div>
                            <div class="d_flex flex_ai_c flex_jc_sb">
                                <div class="cart">
                                    <ShoppingCart/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</template>

<script setup lang="ts">
import {ref} from "vue";

const props = defineProps<{
    data: any
}>()
const activeIndex = ref<number>(0)

const cardChange = (index:number) => {
    console.log("index", index)
    activeIndex.value = index
}


</script>

<style lang="scss">
@use "src/views/site/diy/style.css";
</style>
